<template>
  <div class="head">
        <el-row :gutter="10">
            <el-col :xs="8" :sm="4" :md="4">
               <div class="logo">
                 <span class="logo_prefix">LiaoFan</span><span class="logo_suffix">Admin</span>
               </div>
              </el-col>
            <el-col :xs="4" :sm="12" :md="10">
              <div class="search">
                  <el-input size="small" placeholder="请输入内容" v-model="search">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
            </el-col>
            <el-col :xs="4" :sm="4" :md="{span:3,offset: 4}">
              <div class="news">
                <el-col :span="10">
                  <el-dropdown >
                    <span>
                      <el-badge :value="5" class="item">
                      <i class="el-icon-message"></i>
                    </el-badge>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>黄金糕</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
                <el-col :span="8">
                  <el-dropdown  >
                    <span>
                      <el-badge :value="5" class="item">
                      <i class="el-icon-news"></i>
                    </el-badge>
                    </span>
                    
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>黄金糕</el-dropdown-item>
                    
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
                
                
              </div>
            </el-col>
            <el-col :xs="8" :sm="4" :md="2">
              <div class="user-header">
                <el-dropdown trigger="click" >
                    <img src="../../../static/images/b_header.jpg" width="50px" />
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item >
                            <div class="setting-div">
                                <span class="setting-icon"><i class="el-icon-star-on"></i></span> 
                                <span class="setting-string"> Profile  个人</span>
                            </div>
                        </el-dropdown-item>
                        <el-dropdown-item divided>
                            <div class="setting-div">
                                <span class="setting-icon"><i class="el-icon-setting"></i></span> 
                                <span class="setting-string"> Settings  设置</span>
                            </div>
                         
                        </el-dropdown-item>
                        <el-dropdown-item divided>
                            <div class="setting-div">
                                <span class="setting-icon"><i class="el-icon-circle-close"></i></span> 
                                <span class="setting-string"> Sign out  退出</span>
                            </div>
                            
                        </el-dropdown-item>
                        
                    </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
        </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search: ""
    };
  },
  methods: {}
};
</script>
<style scoped>
.head {
  position: fixed;
  box-sizing: border-box;
  width: 100%;
  height: 66px;

  font-size: 14px;
  line-height: 66px;
  background-color: #324157;
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  padding: 0 32px 0 40px;
  overflow: hidden;
}

.head .logo {
  float: left;
  cursor: pointer;
  font-size: 22px;
}
.logo_prefix {
  color: #209e91;
}
.logo_suffix {
  color: #fff;
}

.news{
  padding-top: 25px;
  line-height: 10px;
}
.news span{
        display:inline-block;
        margin-left:14px;
        font-size:20px;
        color:#fff;
        line-height:1px;
        height:18px;
        cursor:pointer;

    }

  .user-header{
        line-height:10px;
        padding-top:7px;
        font-size:12px;
    }
    .user-header img{
        border-radius:50%;
        cursor:pointer;
    }
    .pop-image{
        display:block;
        float:left;
    }
    .pop-image img{
        border-radius:50%;
    }
    .pop-div{
        height:55px;
        clear:both;
    }
    .pop-content{
        display:block;
        font-size:12px;
        line-height:14px;
        padding-top:15px;
        margin-left:60px;
    }
    .pop-time{
        display:block;
        float:right;
        font-size:10px;
        color:#ccc;

    }
    .pop-title{
        font-size:12px;
        color:#209e91;
    }
    .task-div{
        clear:both;
        height:55px;
    }
    .task-span{
        display:block;
        float:left;
        font-size:12px
    }
    
    .task-content{  
        width:160px;
        line-height:16px;
        margin-left:10px;
        padding:5px;
    }
    .task-time{
        clear:both;
        float:right;
        color:#ccc;
        
    }
    .setting-div{
        height:30px;
        /* line-height:30px; */
        clear:both;
    }
    .setting-div span{
        display:block;
        float:left;
        font-size:14px;
    }
    .setting-icon{
        padding-top:3px;
        padding-right:3px;
    }
    .setting-icon i{
      font-size: 16px;
      margin-right: 10px;
    }
</style>
